@WIN8_DATAGRID_CELL_PADDING: 7px;
@WIN8_DATAGRID_BORDER: 1px solid @DATAGRID_BORDER_COLOR;
@WIN8_DATAGRID_BORDER_HIDDEN: 1px solid transparent;
@WIN8_DATAGRID_NODATA_FONT_SIZE: 17px;
@WIN8_DATAGRID_HEADER_PANEL_MARGIN_BOTTOM: 10px;
@WIN8_DATAGRID_FILTER_OPERATION_IMAGE_SIZE: 16px;
@WIN8_DATAGRID_ROW_BORDER: 1px solid transparent;
@WIN8_DATAGRID_FILTER_OPERATIONS_BORDER: @WIN8_DATAGRID_BORDER;
@WIN8_DATAGRID_DRAG_HEADER_FIRST_SHADOW: 0px 0px 1px @WIN8_DATAGRID_DRAG_HEADER_FIRST_SHADOW_COLOR;
@WIN8_DATAGRID_DRAG_HEADER_SECOND_SHADOW: 0px 1px 3px @WIN8_DATAGRID_DRAG_HEADER_SECOND_SHADOW_COLOR;
@WIN8_DATAGRID_BUTTON_SIZE: 21px;
@WIN8_DATAGRID_GROUP_COLUMN_ICONS_SIZE: 12px;
@WIN8_DATAGRID_CONTEXT_MENU_SORT_ICON_SIZE: 18px;
@WIN8_DATAGRID_ADAPTIVE_TEXT_PADDING: 13px;

.dx-datagrid-checkbox-size {
    &.dx-focused {
        .dx-checkbox-icon {
            border-color: transparent;
        }
    }
}

.dx-datagrid {
    &.dx-datagrid-borders {
        > .dx-datagrid-headers, > .dx-datagrid-rowsview, > .dx-datagrid-total-footer {
            border-left: @WIN8_DATAGRID_BORDER;
            border-right: @WIN8_DATAGRID_BORDER;
        }

        > .dx-datagrid-rowsview, > .dx-datagrid-total-footer {
            border-bottom: @WIN8_DATAGRID_BORDER;
        }

        > .dx-datagrid-pager, > .dx-datagrid-headers {
            border-top: @WIN8_DATAGRID_BORDER;
        }
    }

    .dx-menu-items-container {
        .dx-menu-item {
            .dx-icon-context-menu-sort-asc {
                .dx-icon-sortuptext;
                .dx-icon-sizing(@WIN8_DATAGRID_CONTEXT_MENU_SORT_ICON_SIZE);
            }

            .dx-icon-context-menu-sort-desc {
                .dx-icon-sortdowntext;
                .dx-icon-sizing(@WIN8_DATAGRID_CONTEXT_MENU_SORT_ICON_SIZE);
            }
        }
    }

    .dx-menu {
        background-color: transparent;

        .dx-menu-item-content {
            padding: 10px 0px 0px 5px;

            .dx-icon {
                margin: 0px 4px;
            }
        }
    }

    .dx-icon-filter-operation-equals {
        .dx-icon-equal;
    }

    .dx-icon-filter-operation-default {
        .dx-icon-find;
    }

    .dx-icon-filter-operation-not-equals {
        .dx-icon-notequal;
    }

    .dx-icon-filter-operation-less {
        .dx-icon-less;
    }

    .dx-icon-filter-operation-less-equal {
        .dx-icon-lessorequal;
    }

    .dx-icon-filter-operation-greater {
        .dx-icon-greater;
    }

    .dx-icon-filter-operation-greater-equal {
        .dx-icon-greaterorequal;
    }

    .dx-icon-filter-operation-contains {
        .dx-icon-contains;
    }

    .dx-icon-filter-operation-not-contains {
        .dx-icon-doesnotcontain;
    }

    .dx-icon-filter-operation-starts-with {
        .dx-icon-startswith;
    }

    .dx-icon-filter-operation-ends-with {
        .dx-icon-endswith;
    }

    .dx-menu-items-container .dx-menu-item-has-icon .dx-icon-filter-operation-between {
        background-image: @WIN8_DATAGRID_FILTER_OPERATION_BETWEEN_IMAGE;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 14px 5px;
    }

    .dx-menu-items-container {
        .dx-menu-item-has-icon.dx-menu-item-selected .dx-icon-filter-operation-between, .dx-menu-item-has-icon.dx-state-focused .dx-icon-filter-operation-between {
            background-image: @WIN8_DATAGRID_FILTER_OPERATION_BETWEEN_SELECTED_IMAGE;
        }
    }

    .dx-row-alt {
        & > td {
            background-color: @WIN8_DATAGRID_ROW_ALTERNATION_COLOR;
        }

        &.dx-row:not(.dx-row-removed) {
            border-bottom-color: @WIN8_DATAGRID_ROW_ALTERNATION_COLOR;
        }
    }

    .dx-row-lines > td {
        border-bottom: @WIN8_DATAGRID_BORDER;
    }

    .dx-column-lines > td {
        border-left: @WIN8_DATAGRID_BORDER;
        border-right: @WIN8_DATAGRID_BORDER;
    }

    .dx-editor-cell {
        .dx-texteditor-input {
            margin: 0px;
            border: 0px;
            background: @WIN8_DATAGRID_EDITOR_BACKGROUND;
            color: @WIN8_BASE_TEXT;
            padding-left: @WIN8_DATAGRID_CELL_PADDING;

            &:focus {
                background: @WIN8_WHITE_COLOR;
                color: @WIN8_BLACK_COLOR;
            }
        }

        & > .dx-checkbox {
            margin-top: -2px;
        }

        .dx-numberbox-spin-up-icon,
        .dx-numberbox-spin-down-icon,
        .dx-dropdowneditor-icon {
            color: @WIN8_BASE_TEXT;
        }

        .dx-numberbox-spin .dx-texteditor-input {
            padding-right: @SPIN_CONTAINER_WIDTH;
        }

        .dx-numberbox-spin-touch-friendly .dx-texteditor-input {
            padding-right: @TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH;
        }

        .dx-timebox-date .dx-dropdowneditor-icon {
            color: @WIN8_BASE_TEXT;
        }

        &.dx-focused {
                .dx-numberbox-spin-up-icon,
                .dx-numberbox-spin-down-icon,
                .dx-dropdowneditor-icon {
                    color: @WIN8_BLACK_COLOR;
                }
        }

        .dx-numberbox-spin-up-icon, .dx-numberbox-spin-down-icon, .dx-dropdowneditor-icon, .dx-lookup-field::before {
            opacity: .4;
        }
    }

    .dx-error-row {
        td {
            background-color: @WIN8_DATAGRID_ERROR_ROW_BACKGROUND_COLOR;
            color: @WIN8_DATAGRID_ERROR_ROW_TEXT_COLOR;
            padding: @WIN8_DATAGRID_CELL_PADDING;

            .dx-error-message {
                white-space: normal;
                word-wrap: break-word;
                padding-right: 35px;
            }

            .dx-closebutton {
                float: right;
                margin-top: 2px;
                margin-right: 2px;
                .dx-icon-close;
                .dx-icon-sizing(14px);
            }
        }
    }
}

.dx-datagrid-filter-range-overlay .dx-overlay-content {
    border: @WIN8_DATAGRID_BORDER;
    overflow: inherit;

    .dx-editor-container.dx-highlight-outline::after {
        border-color: @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
        left: 0px;
    }

    .dx-editor-container .dx-texteditor-container {
        margin: 0px;
    }

    .dx-texteditor {
        .dx-texteditor-input {
            &:not(:focus) {
                background-color: @DATAGRID_BASE_BACKGROUND_COLOR;
            }
            border: 0px;
            padding: @WIN8_DATAGRID_CELL_PADDING;
        }

        &:not(.dx-state-focused) {
            .dx-placeholder, .dx-texteditor-input {
                color: @WIN8_DATAGRID_HEADERS_COLOR;
            }
        }

        &.dx-state-focused:after {
            border: 2px solid @WIN8_DATAGRID_FOCUS_COLOR;
        }
    }
}

.dx-datagrid-headers, .dx-datagrid-rowsview {
    .dx-texteditor-input {
       padding: @WIN8_DATAGRID_CELL_PADDING;
    }

    .dx-dropdowneditor-button-visible {
        &.dx-show-clear-button .dx-texteditor-input {
            padding-right: @CLEAR_BUTTON_AREA_WIDTH;
        }
    }
}

.dx-datagrid-export-menu {
    &.dx-context-menu {
        .dx-submenu > .dx-menu-items-container {
            background-color: @WIN8_EXPORT_MENU_POPUP_BACKGROUND;
            border-color: @WIN8_EXPORT_MENU_POPUP_BORDER;
            color: @WIN8_EXPORT_MENU_POPUP_TEXT_COLOR;
        }

        .dx-menu-separator {
            background-color: @WIN8_EXPORT_MENU_SEPARATOP_COLOR;
        }
    }
}

.dx-datagrid-column-chooser-list {
    .dx-empty-message {
        bottom: 15%;
    }
}

.dx-datagrid-column-chooser {
    .dx-overlay-content {
        .box-shadow(0px 1px 3px rgba(0, 0, 0, 0.2));

        .dx-popup-content {
            margin: 0px;
            padding-top: 20px;

            .dx-column-chooser-item {
                .dx-datagrid-header-text;
                color: @WIN8_DATAGRID_HEADERS_COLOR;
                border: @WIN8_DATAGRID_HEADERS_BORDER;
                padding: @WIN8_DATAGRID_CELL_PADDING;
                background-color: @WIN8_BASE_BACKGROUND;
                .box-shadow(0px 1px 3px -1px rgba(0, 0, 0, 0.2));
            }
        }

        .dx-popup-bottom {
            .dx-toolbar-before {
                position: static;
                margin: 0 auto;
            }
        }
    }
}

.dx-datagrid-drag-header {
    .box-shadow(@WIN8_DATAGRID_DRAG_HEADER_FIRST_SHADOW, @WIN8_DATAGRID_DRAG_HEADER_SECOND_SHADOW);
    .dx-datagrid-header-text;
    padding: @WIN8_DATAGRID_CELL_PADDING;
    color: @WIN8_WHITE_COLOR;
    background-color: @WIN8_DATAGRID_DRAG_HEADER_BACKGROUND_COLOR;
}

.dx-datagrid-columns-separator {
    background-color: @WIN8_DATAGRID_HEADERS_SEPARATOR_COLOR;
}

.dx-datagrid-columns-separator-transparent {
    background-color: transparent;
}

.dx-datagrid-drop-highlight {
    & > td {
        background-color: @WIN8_DATAGRID_HEADERS_DROP_HIGHLIGHT_BACKGROUND_COLOR;
        color: @WIN8_DATAGRID_SELECTION_COLOR;
    }
}

.dx-datagrid-focus-overlay {
    border: 2px solid @WIN8_DATAGRID_FOCUS_COLOR;
}

.dx-data-row.dx-state-hover {
    &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) {
        & > td:not(.dx-focused) {
            .text-shadow(none);
            background-color: @WIN8_DATAGRID_HOVER_BACKGROUND;
            color: @WIN8_DATAGRID_HOVER_COLOR;

            &.dx-datagrid-group-space {
                border-right-color: @WIN8_DATAGRID_HOVER_BACKGROUND;
            }
        }

        & > .dx-datagrid-readonly:not(.dx-focused) .dx-texteditor {
            .dx-texteditor-input {
                .text-shadow(none);
                background-color: @WIN8_DATAGRID_HOVER_BACKGROUND;
                color: @WIN8_DATAGRID_HOVER_COLOR;
            }
        }

        &.dx-row:not(.dx-row-lines) {
            border-bottom-color: @WIN8_DATAGRID_HOVER_BACKGROUND;
        }

        & > td.dx-pointer-events-none {
            background-color: transparent;
        }
    }
}

.dx-datagrid-header-text {
    font-size: 12pt;
}

.dx-datagrid-headers {
    color: @WIN8_DATAGRID_HEADERS_COLOR;
    .touch-action(pinch-zoom);

    .dx-datagrid-table {
        .dx-row {
            &:first-child {
                .dx-datagrid-header-text;
            }

            & > td {
                border-bottom: @WIN8_DATAGRID_HEADERS_BORDER;
            }
        }
    }
}

.dx-datagrid-filter-row {
    .dx-menu .dx-overlay-content {
        color: @WIN8_LABEL_TEXT;
    }

    .dx-menu-item {
        &.dx-state-focused {
            background-color: transparent;

            &:after {
                border: 2px solid @WIN8_DATAGRID_FOCUS_COLOR;
            }

            &.dx-menu-item-expanded {
                &:after {
                    border-color: transparent;
                }
            }
        }
    }

    .dx-highlight-outline {
        &::after {
            border-color: @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
        }
    }

    .dx-menu-item-content .dx-icon {
        color: @WIN8_DATAGRID_FILTER_OPERATION_COLOR;
    }
}

.dx-datagrid-header-panel {
    border-bottom: @WIN8_DATAGRID_HEADERS_BORDER;

    .dx-link {
        padding: @WIN8_DATAGRID_CELL_PADDING 0px @WIN8_DATAGRID_CELL_PADDING 10px;
    }

    .dx-button {
        margin-top: 4px;
        margin-bottom: @WIN8_DATAGRID_HEADER_PANEL_MARGIN_BOTTOM;
        padding-top: 3px;
        padding-bottom: 3px;

        &.dx-button-has-text {
            padding-top: 2px;
            padding-bottom: 2px;

            .dx-button-text {
                line-height: 25px;
            }
        }
    }

    .dx-apply-button:not(.dx-state-hover):not(.dx-state-disabled) {
        border-color: @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
    }
}

.dx-datagrid-button(@icon) {
    background: @icon;
    background-position: center;
    width: @WIN8_DATAGRID_BUTTON_SIZE;
    height: @WIN8_DATAGRID_BUTTON_SIZE;
}

.dx-icon-column-chooser {
    .dx-icon-columnchooser;
    .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
}

.dx-datagrid-addrow-button {
    .dx-icon-edit-button-addrow {
        .dx-icon-add;
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }
}

.dx-datagrid-cancel-button {
    .dx-icon-edit-button-cancel {
        .dx-icon-revert;
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }
}

.dx-datagrid-save-button {
    .dx-icon-edit-button-save {
        .dx-icon-save;
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }
}

.dx-apply-button {
    .dx-icon-apply-filter {
        .dx-icon-filter;
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }
}

.dx-datagrid-export-button {
    .dx-icon-export-to {
        .dx-icon-export;
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }

    .dx-icon-export-excel-button {
        .dx-icon-exportxlsx;
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }
}

.dx-datagrid-column-chooser-button {
    .dx-icon-column-chooser {
        .dx-icon-sizing(@WIN8_DATAGRID_BUTTON_SIZE);
    }
}

.dx-datagrid-group-panel {
    margin-bottom: @WIN8_DATAGRID_HEADER_PANEL_MARGIN_BOTTOM;
    .touch-action(pinch-zoom);

    .dx-group-panel-message {
        color: @WIN8_DATAGRID_HEADERS_COLOR;
        padding: @WIN8_DATAGRID_CELL_PADDING;
        border-top: @WIN8_DATAGRID_BORDER_HIDDEN;
        border-bottom: @WIN8_DATAGRID_BORDER_HIDDEN;
    }

    .dx-group-panel-item {
        .dx-datagrid-header-text;
        color: @WIN8_DATAGRID_HEADERS_COLOR;
        border: @WIN8_DATAGRID_HEADERS_BORDER;
        padding: @WIN8_DATAGRID_CELL_PADDING;
    }

    .dx-block-separator {
        padding: @WIN8_DATAGRID_CELL_PADDING + 1px;
        padding-top: @WIN8_DATAGRID_CELL_PADDING + 2px;
        background-color: @WIN8_DATAGRID_SELECTION_BACKGROUND;
    }
}

.dx-datagrid-search-panel {
    margin-bottom: @WIN8_DATAGRID_HEADER_PANEL_MARGIN_BOTTOM;
    margin-left: 10px;
}

.dx-datagrid-rowsview {
    .dx-row {
        border-top: @WIN8_DATAGRID_ROW_BORDER;
        border-bottom: @WIN8_DATAGRID_ROW_BORDER;

        &.dx-edit-row > td {
            border-top: @WIN8_DATAGRID_BORDER;
            border-bottom: @WIN8_DATAGRID_BORDER;
        }
    }

    .dx-data-row {
        .dx-validator.dx-datagrid-invalid {
            .dx-highlight-outline::after {
                border: 1px solid @WIN8_DATAGRID_DATA_FADED_INVALID_COLOR;
            }

            &.dx-focused > .dx-highlight-outline::after {
                border: 1px solid @WIN8_DATAGRID_DATA_INVALID_COLOR;
            }
        }

        .dx-invalid-message {
            .dx-overlay-content {
                padding: 9px 17px 10px;
            }
        }

        .dx-cell-modified {
            .dx-highlight-outline::after {
                border-color: @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
            }
        }
    }

    .dx-adaptive-detail-row {
        .dx-adaptive-item-text {
            padding-top: @WIN8_DATAGRID_ADAPTIVE_TEXT_PADDING;
            padding-bottom: @WIN8_DATAGRID_ADAPTIVE_TEXT_PADDING;
            padding-left: @WIN8_DATAGRID_ADAPTIVE_TEXT_PADDING - 5px;
        }
    }

    .dx-item-modified {
        outline: 2px solid @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
    }

    .dx-row-removed > td {
        background-color: @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
        border-top: 1px solid @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
        border-bottom: 1px solid @WIN8_DATAGRID_DATA_MODIFIED_COLOR;
    }

    .dx-row.dx-group-row {
        color: @WIN8_DATAGRID_GROUP_ROW_COLOR;
        background-color: @WIN8_DATAGRID_GROUP_ROW_BACKGROUND_COLOR;

        td {
            border-top-color: @DATAGRID_BORDER_COLOR;
            border-bottom-color: @DATAGRID_BORDER_COLOR;
        }
    }

    .dx-selection {
        .dx-focused {
            color: @DATAGRID_BASE_COLOR;
        }
    }

    .dx-selection.dx-row, .dx-selection.dx-row:hover {
        .text-shadow(none);
        color: @WIN8_DATAGRID_SELECTION_COLOR;

        & > td {
            background-color: @WIN8_DATAGRID_SELECTION_BACKGROUND;

            &.dx-datagrid-group-space {
                border-right-color: @WIN8_DATAGRID_SELECTION_BACKGROUND;
            }
        }

        & > td.dx-focused {
            background-color: transparent;
        }

        &:not(.dx-row-lines) {
            border-bottom-color: @WIN8_DATAGRID_SELECTION_BACKGROUND;
        }
    }

    .dx-master-detail-row {
        > .dx-datagrid-group-space, .dx-master-detail-cell {
            border-top: @WIN8_DATAGRID_BORDER;
            border-bottom: @WIN8_DATAGRID_BORDER;
        }
    }

    .dx-master-detail-row:not(.dx-datagrid-edit-form) {
        > .dx-datagrid-group-space, .dx-master-detail-cell {
            background-color: @WIN8_DATAGRID_MASTER_DETAIL_BACKGROUND_COLOR;
        }
    }
}

.dx-datagrid-group-opened {
    .dx-icon-chevrondown;
    .dx-icon-sizing(@WIN8_DATAGRID_GROUP_COLUMN_ICONS_SIZE);
}

.dx-datagrid-group-closed {
    .dx-icon-chevronright;
    .dx-icon-sizing(@WIN8_DATAGRID_GROUP_COLUMN_ICONS_SIZE);
}

.dx-datagrid-group-opened, .dx-datagrid-group-closed {
    color: @WIN8_DATAGRID_GROUP_COLUMN_ICON_COLOR;
    width: 100%;
}

.dx-datagrid-search-text {
    .text-shadow(none);
    color: @WIN8_DATAGRID_SEARCH_TEXT_COLOR;
    background-color: @WIN8_DATAGRID_SEARCH_TEXT_BACKGROUND;
}

.dx-datagrid-nodata {
    color: @WIN8_DATAGRID_NODATA_COLOR;
    font-size: @WIN8_DATAGRID_NODATA_FONT_SIZE;
}

.dx-datagrid-export-menu {
    .dx-menu-item {
        .dx-checkbox {
            .dx-checkbox-text {
                padding-left: 26px;
            }
        }
    }
}

.dx-datagrid-bottom-load-panel {
    border-top: @WIN8_DATAGRID_BORDER;
}

.dx-datagrid-pager {
    border-top: 3px double @DATAGRID_BORDER_COLOR;

    &.dx-widget {
        color: @DATAGRID_BASE_COLOR;
    }
}

.dx-datagrid-total-footer {
    border-top: @WIN8_DATAGRID_BORDER;
}

.dx-row.dx-datagrid-group-footer {
    &.dx-column-lines {
        border-bottom: @WIN8_DATAGRID_BORDER;
    }

    & > td {
        border-top: @WIN8_DATAGRID_BORDER;
        border-left-width: 0;
        border-right-width: 0;
    }
}

.dx-datagrid-revert-tooltip {
    .dx-overlay-content{
        padding: 0px;
        background-color: @WIN8_WHITE_COLOR;
    }

    .dx-revert-button {
        padding: 3px 4px;
        padding-bottom: 4px;
        border-color: @WIN8_DATAGRID_DATA_INVALID_COLOR;
        background-color: @DATAGRID_BASE_BACKGROUND_COLOR;

        &.dx-button-has-icon{
            .dx-icon {
                color: @WIN8_DATAGRID_DATA_INVALID_COLOR;
                .dx-icon-sizing(22px);
            }
        }

        &.dx-state-hover{
            background-color: fade(@WIN8_DATAGRID_DATA_INVALID_COLOR, 30%);
        }

        &.dx-state-focused{
            background-color: fade(@WIN8_DATAGRID_DATA_INVALID_COLOR, 50%);
        }
    }
}

.dx-rtl {
    .dx-data-row.dx-state-hover {
        &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) {
            & > td:not(.dx-focused) {
                &.dx-datagrid-group-space {
                    border-left-color: @WIN8_DATAGRID_HOVER_BACKGROUND;
                }
            }
        }
    }

    .dx-datagrid-group-space {
        border-left: @WIN8_DATAGRID_BORDER_HIDDEN;
    }

    .dx-datagrid {
        .dx-menu {
            .dx-menu-item-content {
                padding: 10px 9px 9px 0px;
            }
        }
    }

    .dx-editor-cell {
        .dx-texteditor .dx-texteditor-input{
                padding-right: @WIN8_DATAGRID_CELL_PADDING;
        }
    }

    .dx-datagrid-rowsview {
        .dx-selection, .dx-selection.dx-row:hover {
            & > td:not(.dx-focused) {
                &.dx-datagrid-group-space {
                    border-left-color: @WIN8_DATAGRID_SELECTION_BACKGROUND;
                }
            }
        }
    }

    .dx-datagrid-search-panel {
        margin-bottom: @WIN8_DATAGRID_HEADER_PANEL_MARGIN_BOTTOM;
    }
}

.dx-datagrid-table-fixed {
    .dx-row.dx-group-row {
        background-color: @WIN8_DATAGRID_GROUP_ROW_BACKGROUND_COLOR;

        td {
            background-color: @WIN8_DATAGRID_GROUP_ROW_BACKGROUND_COLOR;
        }
    }
}
